<template>
  <div class="analysis">
    <a-modal
      title="要同步游戏数据到管理中心吗？"
      v-model="syncTip"
      okText="同步"
      cancelText="暂不"
      @ok="beginSync"
    >
      <p>
        同步游戏数据将在游戏内暂停人民工作、生活和治疗四个小时，建议仅在以下情况进行同步
      </p>
      <ul>
        <li>游戏首次启动或重新开始时。</li>
        <li>您无法确认管理中心数据正确时。</li>
      </ul>
    </a-modal>
    <a-row>
      <a-card title="控制面板">
        <a-button-group>
          <a-button type="primary" @click="beginEmpty">{{
            $t("beginEmpty")
          }}</a-button>
          <a-button type="default" @click="syncTip = true">{{
            $t("beginSync")
          }}</a-button>
          <a-button type="default" @click="showDocs">{{
            $t("showDocs")
          }}</a-button>
        </a-button-group>
      </a-card>
    </a-row>
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card
          :loading="loading"
          :title="$t('totalHuman')"
          :total="totalHuman"
        >
          <a-tooltip title="避难所的总人口" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div slot="footer">
            {{ $ta("daily|newHuman", "p") }}<span> {{daylyNewHuman}}</span>
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card
          :loading="loading"
          :title="$t('totalHouse')"
          :total="totalHouse"
        >
          <a-tooltip title="避难所住房数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div slot="footer">
            {{ $ta("daily|newHouse", "p") }}<span> {{daylyNewHouse}}</span>
          </div>
        </chart-card>
      </a-col>
    </a-row>
    <a-card
      :loading="loading"
      style="margin-top: 24px"
      :bordered="false"
      :body-style="{ padding: '24px' }"
    >
      <bar :title="$t('humanTrand')" :data="data" />
    </a-card>
  </div>
</template>


<script>
import ChartCard from "../../../components/card/ChartCard";
import Bar from "../../../components/chart/Bar";
import { sync, restart, loadTotal } from "@/services/system";
import { loadChart } from "@/services/human";

export default {
  name: "Analysis",
  i18n: require("./i18n"),
  data() {
    return {
      loading: true,
      syncTip: false,
      totalHuman: 0,
      totalHouse: 0,
      daylyNewHuman: 0,
      data: [],
      daylyNewHouse: 0,
    };
  },
  created() {
    loadChart().then((res) => {
      this.data = res.data;
      this.loading = false;
    });
    loadTotal().then((res) => {
      this.totalHuman = res.data.totalHuman;
      this.totalHouse = res.data.totalHouse;
      this.daylyNewHuman = res.data.daylyNewHuman;
      this.daylyNewHouse = res.data.daylyNewHouse;
    });
  },
  methods: {
    beginSync() {
      sync().then(() => {
        this.$message.success("同步成功，即将刷新页面", 3);
        location.reload();
      });
    },
    showDocs() {
      window.open("http://guide.gamebrain.world/ff32/46cd", "_blank");
    },
    beginEmpty() {
      var _this = this;
      this.$confirm({
        title: "警告",
        content: "这将删除管理中心的数据，以便于重新开始",
        onOk() {
          restart().then(() => {
            _this.$message.success("清空成功，即将刷新页面", 3);
            location.reload();
          });
        },
        onCancel() {},
      });
    },
  },
  components: {
    // Trend,
    // RankingList,
    Bar,
    // MiniProgress,
    // MiniBar,
    // MiniArea,
    ChartCard,
  },
};
</script>

<style lang="less" scoped>
.extra-wrap {
  .extra-item {
    display: inline-block;
    margin-right: 24px;
    a:not(:first-child) {
      margin-left: 24px;
    }
  }
}
@media screen and (max-width: 992px) {
  .extra-wrap .extra-item {
    display: none;
  }
}
@media screen and (max-width: 576px) {
  .extra-wrap {
    display: none;
  }
}
</style>
